<template>
  <view class="container">
    <view class="avatar">
      <!-- 上传组件 -->
      <u-upload
        ref="product_img"
        name="product_img"
        :maxCount="6"
        :fileList="filelist"
        width="100"
        height="100"
        @delete="del"
        @afterRead="read"
      />
    </view>

    <view class="content">
      <u-form
        labelPosition="left"
        labelWidth="60"
        :model="hirelist"
        :rules="rules"
        ref="product"
      >
        <!-- 部门 -->
        <u-form-item
          label="门店"
          prop="store"
          borderBottom
          @click="showstore = true"
        >
          <u-input
            v-model="hirelist.store.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择所属门店"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        
        <!-- <u-form-item label="是否升级 :" borderBottom @click="showmore = true">
          <u-input
            v-model="must_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择升级车辆"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item> -->

        <!-- 上牌时间 -->
        <u-form-item
          label="上牌时间"
          prop="spdate_text"
          labelWidth="80"
          borderBottom
          @click="
            showCalendar = true;
            hideKeyboard();
          "
        >
          <u--input
            v-model="hirelist.spdate_text"
            disabled
            disabledColor="#ffffff"
            border="none"
          ></u--input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- 品牌 -->
        <u-form-item
          label="品牌"
          prop="brank"
          borderBottom
          @click="showbrank = true"
        >
          <u-input
            v-model="hirelist.brank.name"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择品牌"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>

        <u-form-item
          label="推荐栏"
          borderBottom
          @click="showsellcolumn = true"
        >
          <u-input
            v-model="hirelist.sellcolumn_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择是否推荐"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <!-- <u-form-item
          label="系列"
          prop="brank"
          borderBottom
          @click="showbranktype = true"
        >
          <u-input
            v-model="hirelist.btypename_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择品牌系列"
            border="none"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item> -->
        <u-form-item label="车牌号" prop="carnumberplate">
          <u-input
            v-model="hirelist.carnumberplate"
            ref="displacement"
            placeholder="请填写车牌号"
          />
        </u-form-item>
        <!-- 名称 -->
        <u-form-item label="名称" prop="name">
          <u-input
            v-model="hirelist.name"
            ref="name"
            placeholder="请输入商品名称"
          />
        </u-form-item>

        <u-form-item label="变速箱" prop="gearbox">
          <u-input
            v-model="hirelist.gearbox"
            ref="gearbox"
            placeholder="请填写变速箱"
          />
        </u-form-item>
        <u-form-item label="排放" prop="emission">
          <u-input
            v-model="hirelist.emission"
            ref="gearbox"
            placeholder="请填写排放"
          />
        </u-form-item>
        <u-form-item label="排量" prop="displacement">
          <u-input
            v-model="hirelist.displacement"
            ref="displacement"
            placeholder="请填写排量"
          />
        </u-form-item>
        <u-form-item label="座位" prop="seat">
          <u-input
            v-model="hirelist.seat"
            ref="seat"
            placeholder="请填写座位"
          />
        </u-form-item>
        <u-form-item label="颜色" prop="color">
          <u-input
            v-model="hirelist.color"
            ref="color"
            placeholder="请填写车辆颜色"
          />
        </u-form-item>

        <u-form-item label="发动机" prop="engine">
          <u-input
            v-model="hirelist.engine"
            ref="engine"
            placeholder="请填写发动机"
          />
        </u-form-item>
        <u-form-item label="燃料类型" prop="fuel">
          <u-input
            v-model="hirelist.fuel"
            ref="fuel"
            placeholder="请填写燃料类型"
          />
        </u-form-item>

        <!-- 商品描述 -->
        <u-form-item label="简介" prop="description" borderBottom>
          <u-textarea
            placeholder="不低于3个字"
            v-model="hirelist.description"
            count
          ></u-textarea>
        </u-form-item>

        <!-- 参数3 -->
        <u-form-item label="手续费" prop="commission">
          <u-input
            
            v-model="hirelist.commission"
            placeholder="请填写手续费"
          />
        </u-form-item>
        <!-- 全款 -->
        <u-form-item label="租金" prop="price">
          <u-input
            
            v-model="hirelist.price"
            placeholder="请填写租金"
          />
        </u-form-item>
        <!-- 服务费 -->
        <u-form-item label="服务费" prop="servicefree">
          <u--input
            
            v-model="hirelist.servicefree"
            placeholder="请填写全款"
          />
        </u-form-item>

        <u-form-item label="行驶证:">
          <u-upload
            ref="product_img"
            name="product_img"
            maxCount="2"
            :fileList="filelist1"
            width="100"
            height="100"
            @delete="delxsz"
            @afterRead="readxsz"
          />
        </u-form-item>
        <u-form-item label="视频上传:">
          <view class="vedio">
            <!-- 上传组件 -->
            <u-upload
              name="vedio"
              accept="video"
              :maxCount="1"
              :filelist="vediolist"
              width="100"
              height="100"
              @delete="delvedio"
              @afterRead="readvedio"
            />
          </view>
        </u-form-item>

        <u-action-sheet
          :show="showstore"
          :actions="stolist"
          title="请选所属的门店"
          @close="showstore = false"
          @select="storeSelect()"
        >
        </u-action-sheet>
        <u-action-sheet
          :show="showmore"
          :actions="morelist"
          title="请选择升级车辆"
          @close="showmore = false"
          @select="MoreSelect()"
        >
        </u-action-sheet>

        <u-action-sheet
          :show="showbrank"
          :height="'600px'"
          :actions="branklist"
          title="请选所属品牌"
          @close="showbrank = false"
          @select="brankSelect()"
        >
        </u-action-sheet>

        <u-action-sheet
          :show="showsellcolumn"
          :actions="sellcolumnlist"
          title="请选择是否为推荐"
          @close="showsellcolumn = false"
          @select="sellcolumnSelect()"
        />
        <!-- <u-action-sheet
          :show="showbranktype"
          :height="'600px'"
          :actions="branktypelist"
          title="请选所属品牌系列"
          @close="showbranktype = false"
          @select="branktypeSelect()"
        >
        </u-action-sheet> -->
        <u-calendar
          :show="showCalendar"
          mode="range"
          @confirm="calendarConfirm"
          @close="calendarClose"
          startText="上牌开始"
          endText="上牌结束"
          confirmDisabledText="请选择上牌结束日期"
          :formatter="formatter"
        ></u-calendar>
        <!-- 提交按钮 -->
        <u-button
          text="修改商品"
          icon="pushpin"
          size="small"
          type="success"
          @click="product"
        />
      </u-form>
    </view>
    <!-- 消息提醒 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
  
<script>
export default {
  onLoad() {
    this.auth = this.$u.auth.check();

    this.brank();

    this.storelist();
  },

  onReady() {
    this.$refs.product.setRules(this.rules);
  },
  created() {
    this.timer = setInterval(() => {
      let a = this.$u.count.check();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  data() {
    return {
      showsellcolumn:false,
      filelist: [],
      sellcolumnlist: [
        {
          sellcolumn: 0,
          name: "正常",
        },
        {
          sellcolumn: 1,
          name: "推荐",
        },
      ],
      showstore: false,
      auth: {},
      proid: 0,
      vediolist: [],
      branklist: [],
      brank_text: "",
      piclist: [],
      vedio: "",
      imageslist: [],
      store_text: "",
      stolist: [],
      stoid: null,
      brand_id: 0,
      product_img: "",
      filelist1: [],
      piclist1: [],
      name: "",
      hirelist: {
        brank: {
          name: "",
        },
        store: {
          name: "",
        },
      },
      showbrank: false,
      registrationTime: "",
      param2: "",
      commission: "",
      servicefree: 0,
      description: "",
      showCalendar: false,
      price: 0,

      rules: {
        description: {
          required: true,
          message: "不低于3个字",
          trigger: ["change"],
        },
        "store.name": {
          required: true,
          message: "请选择你所属的门店",
          trigger: ["blur", "change"],
        },
        "brank.name": {
          required: true,
          message: "请选择你所属的品牌",
          trigger: ["blur", "change"],
        },
        name: {
          required: true,
          message: "请填写商品名称",
          trigger: ["blur", "change"],
        },
        gearbox: {
          required: true,
          message: "请填写变速箱",
          trigger: ["blur", "change"],
        },
        emission: {
          required: true,
          message: "车辆排放",
          trigger: ["blur", "change"],
        },
        displacement: {
          required: true,
          message: "车辆排量",
          trigger: ["blur", "change"],
        },
        fuel: {
          required: true,
          message: "燃料类型",
          trigger: ["blur", "change"],
        },
        seat: {
          required: true,
          message: "座位",
          trigger: ["blur", "change"],
        },
        engine: {
          required: true,
          message: "请填写发动机配置",
          trigger: ["blur", "change"],
        },

        commission: {
          required: true,
          message: "请填写手续费",
          trigger: ["blur", "change"],
        },

        price: {
          required: true,
          message: "请填写租金",
          trigger: ["blur", "change"],
        },
        servicefree: {
          required: true,
          message: "请填写服务费",
          trigger: ["blur", "change"],
        },

        carnumberplate: {
          required: true,
          message: "请填写车牌号",
          trigger: ["blur", "change"],
        },
        spdate_text: {
          type: "string",
          min: 2,
          required: true,
          message: "请选择上牌时间",
          trigger: ["change"],
        },
      },
    };
  },

  methods: {
    calendarConfirm(e) {
      this.showCalendar = false;
      this.hirelist.spdate_text = `${e[0]} / ${e[e.length - 1]}`;

      //   this.$refs.product.validateField("registrationTime");
    },
    calendarClose() {
      this.showCalendar = false;
      this.$refs.product.validateField("registrationTime");
    },
    del(e) {
      let list = this.filelist.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist.splice(e.index, index);
          let data = {
            hireid: this.hireid,
            url: e.file.url,
          };

          var result = await this.$u.api.hire.delthumb(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                // 如果是最后一张图片就把其清空
                if ((e.index = 0 && index == 0)) {
                  this.filelist = [];
                }
                this.info();
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
    delvedio() {
      this.vediolist = [];
    },
    async read(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist = this.filelist.concat({ url: result.data });

        //修改本地存储中的图像内容
        this.product_img = result.data;

        let userArray = Object.entries(this.filelist).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径
          let str = item.value.url.slice(24, 200);
          // 把想要的路径追加到数组
          this.piclist.push(str);
        });

        // 数组的去重
        let qcarr = [...new Set(this.piclist)];

        // 数组转化成字符串
        this.product_img = qcarr.join(",");

        console.log(this.product_img);
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    async readvedio(item) {
      //组装上传数据
      var data = {
        filePath: item.file.url,
        name: "vedio",
        header: {},
        formData: {
          proid: this.proid,
        },
      };

      //调用接口
      var result = await this.$u.api.hire.vedioupload(data);

      if (result.code) {
        this.vediolist = [{ url: result.data }];

        //修改本地存储中的图像内容
        this.vedio = result.data;
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    delxsz(e) {
      let list = this.filelist1.map(async (item, index) => {
        // this.filelist(index, 1)

        if (index == e.index) {
          // 删除数组中的某一项

          this.filelist1.splice(e.index, index);
          let data = {
            hireid: this.hireid,
            url: e.file.url,
          };

          var result = await this.$u.api.hire.delxsz(data);

          if (result.code) {
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1200,
              complete: () => {
                // 如果是最后一张图片就把其清空
                if ((e.index = 0 && index == 0)) {
                  this.filelist1 = [];
                }
              },
            });
          } else {
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 1200,
            });
          }
        }
      });
    },
    async readxsz(event) {
      //组装上传数据
      var data = {
        filePath: event.file.thumb,
        name: "product_img",
        header: {},
      };

      //调用接口
      var result = await this.$u.api.product.thumbs(data);

      if (result.code) {
        // 合并对象
        this.filelist1 = this.filelist1.concat({ url: result.data });

        let userArray = Object.entries(this.filelist1).map(([key, value]) => {
          return { value };
        });

        userArray.forEach((item) => {
          // 截取想要部分路径
          let str = item.value.url.slice(24, 200);

          // 把想要的路径追加到数组
          this.piclist1.push(str);
        });
        // 数组的去重
        let qcarr = [...new Set(this.piclist1)];

        // 数组转化成字符串
        this.hirelist.drivinglicense = qcarr.join(",");
      } else {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }
    },
    sellcolumnSelect(e) {
      this.hirelist.sellcolumn_text = e.name;
      this.hirelist.sellcolumn = e.sellcolumn;
    },
    branktypeSelect(e) {
      this.hirelist.btypename_text = e.name;
      this.hirelist.btypeid = e.id;
    },
    brankSelect(e) {
      this.hirelist.brank.name = e.name;
      this.brand_id = e.id;
    },
    storeSelect(e) {
      this.hirelist.store.name = e.name;
      this.stoid = e.id;
    },
    product() {
      this.$refs.product
        .validate()
        .then(async () => {
          let data = {
            drivinglicense: this.hirelist.drivinglicense,
            stoid: this.stoid,
            name: this.hirelist.name,
            servicefree: this.hirelist.servicefree,
            price: this.hirelist.price,
            servicefree: this.hirelist.servicefree,
            spdate_text: this.hirelist.spdate_text,
            commission: this.hirelist.commission,
            carnumberplate: this.hirelist.carnumberplate,
            sellcolumn: this.hirelist.sellcolumn,

            displacement: this.hirelist.displacement,
            gearbox: this.hirelist.gearbox,
            seat: this.hirelist.seat,
            engine: this.hirelist.engine,
            emission: this.hirelist.emission,
            fuel: this.hirelist.fuel,
            brand_id: this.brand_id,
            description: this.hirelist.description,
            product_img: this.product_img,
            vedio: this.vedio,
          };

          // console.log(tjdata)

          let result = await this.$u.api.hire.add(data);

          if (result.code) {
            this.tjdata = [];
            this.$refs.notice.show({
              type: "success",
              message: result.msg,
              duration: 1000,
              complete: () => {
                //返回上一个界面
                uni.reLaunch({
                  url: "/pagesC/product/hire/index",
                });
              },
            });
          } else {
            this.tjdata = [];
            this.$refs.notice.show({
              type: "danger",
              message: result.msg,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          uni.$u.toast("效验失败");
        });
    },
    hideKeyboard() {
      uni.hideKeyboard();
    },
    async storelist() {
      let data = {
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      };
      let result = await this.$u.api.product.storelist(data);

      if (result.code) {
        this.stolist = result.data;
      }
    },
    async brank() {
      let result = await this.$u.api.product.branklist({
        adminid: this.auth.id,
        stoid: this.auth.stoid,
      });

      if (result.code) {
        this.branklist = result.data;
      } else {
        this.$refs.notice.show({
          type: "danger",
          message: result.msg,
        });
      }
    },
  },
};
</script>
  
<style >
.content {
  padding: 20px;
}

.container {
  height: 100%;
  margin: 0 50rpx;
  box-sizing: border-box;
}

.avatar {
  text-align: center;
}

.u-avatar {
  margin: 80rpx auto 40rpx;
}

.vedio {
  text-align: center;
}

.u-vedio {
  margin: 80rpx auto 40rpx;
}

.xcx {
  width: 200rpx;
  height: 200rpx;
  margin: 80rpx auto 40rpx;
  border-radius: 100%;
  overflow: hidden;
}

.nickname {
  font-size: 14px;
  text-align: center;
}

.title {
  text-align: center;
  margin: 40rpx 0;
  font-size: 14rpx;
}

.avatar .u-upload {
  justify-content: center;
  align-items: center;
  margin: 3em auto;
}

.vedio .u-upload {
  justify-content: center;
  align-items: center;
  margin: 0.3em auto;
}

.u-form-item__body__left__content__label.data-v-5e7216f1 {
  width: 75px;
}
</style>
  